import dateFormat from "vux/src/tools/date/format.js";

import { mapGetters } from "vuex";
import { addClass, removeClass } from "@/assets/js/dom.js";
import dataTimeFilter from "../../../common/dataTimeFilter/dataTimeFilter";
import template from "./memberTemplate";
const { render, staticRenderFns } = template;

export default {
  render,
  staticRenderFns,
  components: {
    dataTimeFilter,
  },
  data() {
    return {
      datePicker: false,
      pikerShow: false,
      beginTime: dateFormat(new Date(), "YYYY-MM-DD"),
      endTime: dateFormat(new Date(), "YYYY-MM-DD"),

      pullUpLoad: true,
      memberList: [],

      sortTypeList: [
        { id: 1, name: "最后离线" },
        { id: 2, name: "最新注册" },
        { id: 3, name: "盈亏最多" },
      ],
      searchValue: "",
      nowId: 1,
      sortType: 1,
      sortValue: "最后离线",
      page: 1,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.resetAll();
  },
  methods: {
    activeCopy(e) {
      addClass(e.target, "activeScroll");
      document.addEventListener("touchmove", () => {
        removeClass(e.target, "activeScroll");
      });
      document.addEventListener("touchend", () => {
        removeClass(e.target, "activeScroll");
      });
    },
    goToDetail(id) {
      this.$router.push({
        path: "/memberDetail",
        query: { id: id, start_time: this.beginTime, end_time: this.endTime },
      });
    },
    pullingDown() {
      this.page = 1;
      this._getMyMember(2);
    },
    pullingUp() {
      if (this.pullUpLoadFlag) {
        this.$refs.scroll.forceUpdate(false);
        return;
      }
      this.page += 1;
      this._getMyMember();
    },
    resetAll() {
      let vm = this;
      vm.sortType = 1;
      vm.sortValue = "最后离线";
      vm.beginTime = "";
      vm.endTime = "";
      vm.nowId = 1;
      vm._getMyMember(1);
    },
    pickHide(data) {
      this.datePicker = data;
    },
    getTime(data) {
      this.beginTime = data[0];
      this.endTime = data[1];
      this.datePicker = false;

      this._getMyMember(1);
    },
    picking(id) {
      this.nowId = id;
      this.sortType = id;
      this.sortValue = this.sortTypeList.find((item) => {
        return item.id == id;
      }).name;

      setTimeout(() => {
        this.pikerShow = false;
      }, 200);
      this._getMyMember(1);
    },
    _getMyMember(flag) {
      let vm = this;
      vm.pullUpLoadFlag = false;
      if (vm.searchValue == "" && !flag) {
        vm.$vux.toast.text("请输入账号", "bottom");
        return;
      }
      if (flag != 2) {
        vm.$vux.loading.show();
      }
      let params = {};
      params.token = localStorage.getItem("token");
      params.start_time = vm.beginTime;
      params.end_time = vm.endTime;
      params.sort_type = vm.sortType;
      params.user_value = vm.searchValue;
      params.page = vm.page;
      vm.$http
        .post(vm.urlRequest + "?m=api&c=user&a=myMember", params)
        .then((res) => {
          if (res.status == 0) {
            vm.searchValue = "";

            if (vm.page == 1) {
              vm.memberList = res.list;
            } else {
              vm.memberList = vm.memberList.concat(res.list);
            }
            console.log("data", vm.memberList);
            if (res.list.length < 20) {
              vm.pullUpLoadFlag = true;
            }
          } else {
            if (res.ret_msg && res.ret_msg != "") {
              vm.$vux.toast.show({
                text: res.ret_msg,
              });
            }
          }
          vm.$vux.loading.hide();
        })
        .catch((err) => {
          vm.$vux.loading.hide();
          vm.$refs.scroll.forceUpdate(false);
          console.log(err);
        });
    },
  },
  filters: {
    timeFilter(input) {
      let date = new Date(input * 1000);
      let M = date.getFullYear();
      let Y = date.getMonth() + 1;
      let D = date.getDate();
      let H = date.getHours();
      let MIN = date.getMinutes();
      return M + "-" + Y + "-" + D + " " + H + ":" + MIN;
    },
  },
  watch: {
    $route(to, from) {
      if (from.name != "MemberDetail" && to.name == "Member") {
        this.memberList = [];
        this.resetAll();
      }
    },
  },
};

// WEBPACK FOOTER //
// ./src/components/personalCenter/teamManagement/member/member.vue
